<template>
  <div class="base-container" id="app">
    <div class="app-container">
      <div class="headTitle">
        <div style="font-size: 18px;line-height: 36px;">基本信息</div>
        <div>
          <el-button size="mini" v-if="!isChange" @click="() => isChange = true">修改</el-button>
          <el-button type="primary" size="mini" v-if="isChange" @click="handleSave">保存</el-button>
        </div>
      </div>
      <div :class="{content: true, ischange: !isChange}">
        <el-form :model="formData" :rules="rules" ref="formData" label-width="150px" class="demo-ruleForm">
          <el-form-item label="企业名称：" prop="name">
              <el-input v-model="formData.name" :disabled="!isChange" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="营业地址：" prop="address">
            <el-input v-model="formData.address" placeholder="请输入内容" :disabled="!isChange"></el-input>
          </el-form-item>
          <el-form-item label="企业简介：" prop="introduce" >
            <el-input type="textarea" :rows="3" style="max-width: 500px;" :disabled="!isChange" v-model="formData.introduce" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="营业时间：" prop="businessHours">
            <el-time-picker is-range value-format="HH:mm" :disabled="!isChange" v-model="formData.businessHours" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
          </el-form-item>
          <el-form-item label="客户电话：" prop="businessPhone">
          <el-input v-model="formData.businessPhone" :disabled="!isChange" placeholder="请输入内容"></el-input>
        </el-form-item>
          <el-form-item label="是否支持救援服务："  prop="isRescue">
            <el-switch v-model="formData.isRescue" :disabled="!isChange" active-color="#3f78f6" inactive-color="#ccc"> </el-switch>
          </el-form-item>
          <el-form-item v-if="formData.isRescue" label="救援时间：" prop="rescueHours">
            <el-time-picker is-range value-format="HH:mm" :disabled="!isChange" v-model="formData.rescueHours" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
          </el-form-item>
          <el-form-item v-if="formData.isRescue" label="救援电话：" prop="rescuePhone">
            <el-input v-model="formData.rescuePhone" :disabled="!isChange" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="添加图片：" prop="fullName">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :data="fullUpType"
              :file-list="fileList"
              :class="{disabled:uploadDisabled}"
              :on-success="uploadSuccess"
              :on-remove="handleRemove"
              list-type="picture-card"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="门店位置：">
              <dragMap @drag="dragMap" :MapCityName="prov" class="mapbox" :address="formData.address" ref="dMap"></dragMap>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getBaseinfo, changeBase } from '@/api/base/theme'
import {mapGetters} from 'vuex'
import { updatedImg } from '@/filters/index'
import cityApi from '@/api/base/city'
import dragMap from '../components/mapDrag'
export default {
  name: 'app',
  components: {
    dragMap
  },
  data() {
    return {
      isChange: false,
      formData: {},
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      prov: '北京',
      city: '北京',
      district: '东城区',
      cityArr: [],
      arr: cityApi.arrAll,
      districtArr: [],
      dragData: {
        lng: null,
        lat: null,
        address: null,
        nearestJunction: null,
        nearestRoad: null,
        nearestPOI: null
      },
      imgs: '',
      imgPhone: '',
      textTip: '',
      uploadDisabled: '',
      fullUpType: { type: 7, extension: 'img' },
      fileList: [],
      businessLicense: '',
      state: [
        {
          id: 1,
          value: '1类'
        },
        {
          id: 2,
          value: '3类'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['storeId'])
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const { data } = await getBaseinfo({id: this.storeId})
      this.formData = data
      this.formData.businessHours = data.businessHours.split('-')
      this.formData.rescueHours = data.rescueHours.split('-')
      // this.formData.isRescue = data.isRescue === 1
    },
    // 业务方法
    handleSave() {
      this.$refs['formData'].validate(valid => {
        if (valid) {
          const params = {...this.formData, id: this.storeId}
          params.businessHours = params.businessHours.join('-')
          params.rescueHours = params.rescueHours.join('-')
          const data = changeBase(params)
          if (data) {
            this.$message.success('信息保存成功')
            this.isChange = false
          } else {
            this.$message.error('信息保存失败')
          }
        } else {
          return false
        }
      })
    },
    // 删除
    handleDelete(item) {
      this.$confirm('确认删除？')
        .then(ret => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          console.log(ret)
        })
        .catch(ret => {
          console.log(ret)
        })
    },
    handleRemove(file, fileList) {
      this.uploadDisabled = false
    },
    handleSearch() {
      this.$refs.dMap.handleSearchaddress()
    },
    dragMap(data) {
      this.dragData = {
        lng: data.position.lng,
        lat: data.position.lat,
        address: data.address,
        nearestJunction: data.nearestJunction,
        nearestRoad: data.nearestRoad,
        nearestPOI: data.nearestPOI
      }
    },
    handleChange() {
      this.$refs.dMap.handleSearch(this.prov)
    },
    updateCity: function() {
      for (var i in this.arr) {
        var obj = this.arr[i]
        if (obj.name === this.prov) {
          this.cityArr = obj.sub
          break
        }
      }
      this.city = this.cityArr[1].name
    },
    updateDistrict: function() {
      for (var i in this.cityArr) {
        var obj = this.cityArr[i]
        if (obj.name === this.city) {
          this.districtArr = obj.sub
          break
        }
      }
      if (
        this.districtArr &&
        this.districtArr.length > 0 &&
        this.districtArr[1].name
      ) {
        this.district = this.districtArr[1].name
      } else {
        this.district = ''
      }
    },
    // 文件上传完成
    typeTip(obj) {
      this.$message.error(obj)
    },
    uploadSuccess(obj, file) {
      console.log(file)
      this.imgs = file.url
      this.businessLicense = obj.fid
      this.uploadDisabled = true
      updatedImg(file, obj, this.typeTip)
    }
  },
  beforeMount: function() {
    this.updateCity()
    this.updateDistrict()
  },
  watch: {
    prov: function() {
      this.updateCity()
      this.updateDistrict()
    },
    city: function() {
      this.updateDistrict()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .base-container{
    .el-input--medium{
      max-width: 260px;
    }
    .ischange{
      .el-input__inner{
        border:none !important;
        background: #fff;
        color: #666;
      }
      .el-textarea__inner{
        background: #fff;
        color: #666;
      }
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.base-container {
  background: #fff;
  min-height: calc(100vh - 70px);
  .headTitle{
    display: flex;
    justify-content: space-between;
    border-bottom: solid 3px #f0f0f0;
    padding-bottom: 10px;
  }
  .content{
    padding: 40px;
  }
}
</style>
